<template>
  <div class="filter">
    <el-row :gutter="10" type="flex" align="middle">
      <el-col :span="8">单程：{{info.departCity}} - {{info.destCity}} / {{info.departDate}}</el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="filterData">
          <el-option
            v-for="(item,index) in options.airport"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间" @change="filterData">
          <el-option
            v-for="(item,index) in options.flightTimes"
            :key="index"
            :label="`${item.from}:00 - ${item.to}:00`"
            :value="`${item.from},${item.to}`"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司" @change="filterData">
          <el-option
            v-for="(item,index) in options.company"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airModel" placeholder="机型" @change="filterData">
          <el-option
            v-for="(item,index) in modelOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <!-- 取消筛选 -->
    <div class="filterCancel">
      筛选：
      <el-button type="primary" round plain size="mini" @click="filterCancel">撤销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["options", "info", "flightsData"],
  data() {
    return {
      airport: "", //起飞机场
      company: "", //航空公司
      flightTimes: "", //起飞时间
      airModel: "", //机型
      modelOptions: [
        {
          label: "大",
          value: "L"
        },
        {
          label: "中",
          value: "M"
        },
        {
          label: "小",
          value: "S"
        }
      ] //型号
    };
  },
  methods: {
    filterData() {
      var newList = [...this.flightsData];
      if (this.airport) {
        newList = newList.filter(item => item.org_airport_name == this.airport);
      }
      if (this.company) {
        newList = newList.filter(item => item.airline_name == this.company);
      }
      if (this.airModel) {
        newList = newList.filter(item => item.plane_size == this.airModel);
      }
      if (this.flightTimes) {
        newList = newList.filter(item => {
          var startTime = Number(this.flightTimes.split(",")[0]);
          var endTime = Number(this.flightTimes.split(",")[1]);
          var flightsTime = Number(item.dep_time.split(":")[0]);
          return flightsTime >= startTime && flightsTime < endTime;
        });
      }
      this.$emit("setFlight", newList);
    },
    //清除筛选条件
    filterCancel() {
      this.airport = "";
      this.company = "";
      this.flightTimes = "";
      this.airModel = "";
      this.filterData();
    }
  }
};
</script>

<style lang="less" scoped>
.filterCancel {
  margin-top: 10px;
}
</style>